<div nz-col [nzLg] = "{span: 4}" [nzMd] = "{span: 4}" [nzSm] = "{span: 24}" [nzXs] = "{span: 24}" >

  <div style="height:240px;background-color: white;margin-top: 40px">
    <div style="height: 40px;background-color: #EBC272;text-align: center;color: white;font-size: 24px" >
      <span>最近活动</span>
    </div>
    <div class="warning-line">
      <p class="warning-text">Kiosk007开始促销</p>
      <p class="warning-time">2018.1.11</p>
    </div>
    <div class="warning-line">
      <p class="warning-text">Kiosk028开始促销</p>
      <p class="warning-time">2018.1.11</p>
    </div>
  </div>

  <div style="height:240px;background-color: white;margin-top: 40px">
    <div style="height: 40px;background-color: #ED6B75;text-align: center;color: white;font-size: 24px" >
      <span>报警</span>
    </div>
    <div class="warning-line">
      <p class="warning-text">Kiosk110设备故障</p>
      <p class="warning-time">2018.1.11</p>
    </div>
    <div class="warning-line">
      <p class="warning-text">Kiosk092缺货严重</p>
      <p class="warning-time">2018.1.11</p>
    </div>
  </div>

  <div style="height:480px;background-color: white;margin-top: 40px">
    <div id="stay_time"  class="chart-div" ></div>
  </div>
</div>


<div nz-col [nzLg] = "{span: 14}" [nzMd] = "{span: 14}" [nzSm] = "{span: 24}" [nzXs] = "{span: 24}" style="margin-left: 40px" >
  <div style="height:1040px;margin-top: 40px;background-color: white">
    <div style="padding: 10px 2em 10px 2em;font-size: 3em">
      <span >售货机分布地图</span>
      <hr>
    </div>
    <div id="map" class="chart-div" style="height: 966px"></div>
  </div>

</div>

<div nz-col [nzLg] = "{span: 4}" [nzMd] = "{span: 4}" [nzSm] = "{span: 24}" [nzXs] = "{span: 24}" style="margin-left: 40px">

  <div  style="height:130px;background-color: #ed6b75;margin-top: 40px;color:white">
    <div nz-col [nzSpan] = "6"  [nzOffset]="2">
      <i class="anticon anticon-bar-chart line1-ico"></i>
    </div>
    <div nz-col [nzSpan] = "16"  >
      <p class="line1-text-up text-right">今日交易总数&nbsp;</p>
      <p class="line1-text-down text-right" >3.2&nbsp;<span style="font-size: 0.5em;">万&nbsp;</span></p>
    </div>
  </div>

  <div  style="height:130px;background-color: #36c6d3;margin-top: 40px;color:white">
    <div nz-col [nzSpan] = "6"  [nzOffset]="2">
      <i class="anticon anticon-pay-circle line1-ico"></i>
    </div>
    <div nz-col [nzSpan] = "16"  >
      <p class="line1-text-up text-right">今日交易总额&nbsp;</p>
      <p class="line1-text-down text-right" >5.6&nbsp;<span style="font-size: 0.5em;">万&nbsp;</span></p>
    </div>
  </div>

  <div  style="height:130px;background-color: #ebc272;margin-top: 40px;color:white">
    <div nz-col [nzSpan] = "6"  [nzOffset]="2">
      <i class="anticon anticon-frown line1-ico"></i>
    </div>
    <div nz-col [nzSpan] = "16"  >
      <p class="line1-text-up text-right">今日失败交易&nbsp;</p>
      <p class="line1-text-down text-right" >12&nbsp;<span style="font-size: 0.5em;">次&nbsp;</span></p>
    </div>
  </div>

  <div  style="height:130px;background-color:  #659be0;margin-top: 40px;color:white">
    <div nz-col [nzSpan] = "6"  [nzOffset]="2">
      <i class="anticon anticon-line-chart line1-ico"></i>
    </div>
    <div nz-col [nzSpan] = "16"  >
      <p class="line1-text-up text-right">今日总访问量&nbsp;</p>
      <p class="line1-text-down text-right" >5.8&nbsp;<span style="font-size: 0.5em;">万&nbsp;</span></p>
    </div>
  </div>

  <div style="height:360px;margin-top: 40px;padding-left: 20px;background-color: white">
    <div id="sale_rank"  class="chart-div" ></div>
  </div>
</div>
